<script setup lang="ts">
const { waterForm, tableHeaders } = defineProps<{
  waterForm: Object; // 定义采样时间的类型
  tableHeaders: Array; // 定义采样时间的类型
  tabler: Array; // 定义采样时间的类型
}>();
</script>

<template>
  <div>
    <div
      v-for="(pageData, pageIndex) in tableHeaders"
      :key="pageIndex"
      style="padding: 0 30px"
    >
      <h1 style="text-align: center; padding-top: 40px">
        环境空气和废气 电感耦合等离子体质谱法分析原始记录（A面）
      </h1>
      <div>SXLPHJ/JL/CX-22-75</div>
      <table class="table">
        <tr style="background-color: #f2f2f2">
          <td>任务编号</td>
          <td>
            <span>{{ waterForm.task_name }}</span>
          </td>
          <td>采样日期</td>
          <td>
            <span>{{ waterForm.sampling_time }}</span>
          </td>
          <td>分析日期</td>
          <td>
            <span>{{ waterForm.anal_time }}</span>
          </td>
          <td>样品类别</td>
          <td>
            <span>{{ waterForm.category_id }}</span>
          </td>
        </tr>
        <!-- 第一行 -->
        <tr>
          <td>分析方法</td>
          <td colspan="3">
            <span>{{ waterForm.method }}</span>
          </td>
          <td>环境条件</td>
          <td>
            <span>{{ waterForm.temperature }}&nbsp;℃</span>
          </td>
          <td>环境湿度</td>
          <td>
            <span>{{ waterForm.humidity }}&nbsp; %RH</span>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>分析仪器</td>
          <td colspan="3">
            <div
              v-for="(item, index) in waterForm.device.device_name"
              :key="index"
            >
              {{ item }}
            </div>
          </td>
          <td>仪器型号</td>
          <td>
            <div
              v-for="(item, index) in waterForm.device.device_model"
              :key="index"
            >
              {{ item }}
            </div>
          </td>
          <td>仪器编号</td>
          <td style="width: 100px">
            <div
              v-for="(item, index) in waterForm.device.device_number"
              :key="index"
            >
              {{ item }}
            </div>
          </td>
        </tr>
        <tr>
          <td>仪器条件</td>
          <td colspan="2">
            <span>{{ waterForm.yqtj }}℃</span>
          </td>
          <td>计算公式</td>
          <td colspan="2">
            <span>{{ waterForm.js_formula }}</span>
          </td>
          <td>基准含氧量φ(O₂)</td>
          <td>
            <span>{{ waterForm.jzyhl }}</span>
          </td>
        </tr>
        <tr>
          <td>前处理方法</td>
          <td colspan="3">
            <span>{{ waterForm.process }}</span>
          </td>
          <td>内标响应范围%</td>
          <td>
            <span>{{ waterForm.nbxyfw }}&nbsp;℃</span>
          </td>
          <td>内标元素</td>
          <td>
            <span>{{ waterForm.nbys }}&nbsp; %RH</span>
          </td>
        </tr>
      </table>
      <table class="table">
        <tr>
          <td colspan="6">元素(模式)</td>
          <td
            v-for="(item, index) in waterForm?.bdatas.dcwName.slice(0, 4)"
            :key="index"
            colspan="3"
          >
            {{ item }}
          </td>
          <td rowspan="3">备注</td>
        </tr>
        <tr>
          <td colspan="6">检出限()</td>
          <td
            v-for="(item, index) in waterForm?.bdatas.jcx.slice(0, 4)"
            :key="index"
            colspan="3"
          >
            {{ item }}
          </td>
        </tr>
        <tr>
          <td
            v-for="(key, index) in Object.keys(pageData[0]).filter(
              (k) => k !== '备注'
            )"
            :key="index"
            :style="index === 0 ? 'width:120px' : ''"
          >
            {{ key }}
          </td>
        </tr>
        <tr v-for="(row, rowIndex) in pageData" :key="rowIndex">
          <td v-for="(key, colIndex) in Object.keys(row)" :key="colIndex">
            {{ row[key] }}
          </td>
        </tr>
      </table>
      <!--<table class="table">
        <tr>
          <td colspan="6">
            <div class="table-td">平行样测定</div>
          </td>
        </tr>
        <tr>
          <td>样品编号</td>
          <td>PH值</td>
          <td>平均值</td>
          <td>差值(PH单位)</td>
          <td>允许差(PH单位)</td>
          <td>是否合格</td>
        </tr>
        <tr v-for="(item, index) in waterForm.pxycd" :key="index">
          <td>
            {{ item.px_ypbh }}
          </td>
          <td>
            {{ item.px_ypbh }}
          </td>
          <td v-if="index === 0 || index === 2" rowspan="2">
            {{ item.px_phz }}
          </td>
          <td v-if="index === 0 || index === 2" rowspan="2">
            {{ item.px_cz }}
          </td>
          <td v-if="index === 0 || index === 2" rowspan="2">
            {{ item.px_yxc }}
          </td>
          <td v-if="index === 0 || index === 2" rowspan="2">
            {{ item.px_sfhg }}
          </td>
        </tr>
        <tr>
          <td colspan="6">
            <div class="table-td">标准样品测定</div>
          </td>
        </tr>
        <tr>
          <td colspan="2">标样批号</td>
          <td colspan="2">测定结果</td>
          <td>标准值</td>
          <td>是否合格</td>
        </tr>
        <tr v-for="(item, index) in waterForm.bzycd" :key="index">
          <td colspan="2">
            {{ item.bz_byph }}
          </td>
          <td colspan="2">
            {{ item.bz_cdjg }}
          </td>
          <td>
            {{ item.bz_bzz }}
          </td>
          <td>
            {{ item.bz_sfhg }}
          </td>
        </tr>
        <tr>
          <td colspan="2">备注</td>
          <td colspan="4">
            {{ waterForm.notes }}
          </td>
        </tr>
      </table> -->
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 20px;
        "
      >
        <div>分析人：</div>
        <div>校核人：</div>
        <div>审核人：</div>
        <div>第 {{ pageIndex + 1 }} 页 / 共 {{ tableHeaders.length }} 页</div>
      </div>
    </div>
    <div style="padding-top: 50px">
      <h1 style="text-align: center">
        环境空气和废气 电感耦合等离子体质谱法分析原始记录（B面）
      </h1>
      <div>SXLPHJ/JL/CX-22-75</div>
      <div style="display: flex">
        <table class="table">
          <tr>
            <td colspan="5" style="text-align: center">溶液配制</td>
          </tr>
          <tr>
            <td>标准贮备液批号</td>
            <td>标准贮备液浓度</td>
            <td>贮备液有效日期</td>
            <td>标准使用液浓度</td>
            <td>配置日期</td>
          </tr>
          <!-- 溶液配置 -->
          <tr v-for="(item, index) in waterForm.bdatas.rypz" :key="index">
            <td>
              {{ item.bzzbyph }}
            </td>
            <td>
              {{ item.bzzbynd }}
            </td>
            <td>
              {{ item.zbyyxrq }}
            </td>
            <td>
              {{ item.bzsyynd }}
            </td>
            <td>
              {{ item.pzrq }}
            </td>
          </tr>
        </table>
        <table class="table">
          <tr>
            <td colspan="8" style="text-align: center">标准曲线</td>
          </tr>
          <tr>
            <td>元素</td>
            <td colspan="7">
              {{ waterForm.bdatas.bzqx.ys1 }}
            </td>
          </tr>
          <tr>
            <td>编号</td>
            <td>标准空白</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
          </tr>
          <tr>
            <td>标准使用液加入量（mL）</td>
            <td>
              {{ waterForm.bdatas.bzqx.bzsyy1 }}
            </td>
            <td>
              {{ waterForm.bdatas.bzqx.bzsyy2 }}
            </td>
            <td>
              {{ waterForm.bdatas.bzqx.bzsyy3 }}
            </td>
            <td>
              {{ waterForm.bdatas.bzqx.bzsyy4 }}
            </td>
            <td>
              {{ waterForm.bdatas.bzqx.bzsyy5 }}
            </td>
            <td>
              {{ waterForm.bdatas.bzqx.bzsyy6 }}
            </td>
            <td>
              {{ waterForm.bdatas.bzqx.bzsyy7 }}
            </td>
          </tr>
          <tr>
            <td>标准物质浓度（μg/L）</td>
            <td>
              {{ waterForm.bdatas.bzqx.bzwznd1 }}
            </td>
            <td>
              {{ waterForm.bdatas.bzqx.bzwznd2 }}
            </td>
            <td>
              {{ waterForm.bdatas.bzqx.bzwznd }}
            </td>
            <td>
              {{ waterForm.bdatas.bzqx.bzwznd4 }}
            </td>
            <td>
              {{ waterForm.bdatas.bzqx.bzwznd5 }}
            </td>
            <td>
              {{ waterForm.bdatas.bzqx.bzwznd6 }}
            </td>
            <td>
              {{ waterForm.bdatas.bzqx.bzwznd7 }}
            </td>
          </tr>
          <tr>
            <td>校准曲线(y=a+bx)，r</td>
            <td colspan="4">曲线信息见 第 页至 页</td>
            <td>定容体积</td>
            <td colspan="2">
              {{ waterForm.bdatas.bzqx.drtj }}
            </td>
          </tr>
        </table>
      </div>
      <table class="table">
        <tr>
          <td colspan="6">元素</td>
          <td colspan="2">
            {{ waterForm.bdatas.ys.ys1 }}
          </td>
          <td colspan="2">
            {{ waterForm.bdatas.ys.ys2 }}
          </td>
          <td colspan="2">
            {{ waterForm.bdatas.ys.ys3 }}
          </td>
          <td colspan="2">
            {{ waterForm.bdatas.ys.ys4 }}
          </td>
        </tr>
        <tr>
          <td colspan="6">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              检出限(
              {{ waterForm.unit.jcx }}
              )
            </div>
          </td>
          <td v-for="(item, index) in 4" :key="index" colspan="2">
            {{ waterForm.bdatas.jcx[`ys${index}`] }}
          </td>
        </tr>
        <tr>
          <td colspan="6">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              测定下限(
              {{ waterForm.unit.cdxx }}
              )
            </div>
          </td>
          <td v-for="(item, index) in 4" :key="index" colspan="2">
            {{ waterForm.bdatas.cdxx[`cdxx${index}`] }}
          </td>
        </tr>
        <tr>
          <td colspan="6">重复性限值r</td>
          <td v-for="(item, index) in 4" :key="index" colspan="2">
            {{ waterForm.bdatas.cfxxz[`cfxxz${index}`] }}
          </td>
        </tr>
        <tr>
          <td rowspan="3">校核点</td>
          <td colspan="3" rowspan="3">
            {{ waterForm.bdatas.jhd.ypbh }}
          </td>
          <td colspan="2">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              测定值(
              {{ waterForm.unit.jhd_cdz }}
              )
            </div>
          </td>
          <td colspan="2">
            {{ waterForm.bdatas.jhd.cdz1 }}
          </td>
          <td colspan="2">
            {{ waterForm.bdatas.jhd.cdz2 }}
          </td>
          <td colspan="2">
            {{ waterForm.bdatas.jhd.cdz3 }}
          </td>
          <td colspan="2">
            {{ waterForm.bdatas.jhd.cdz4 }}
          </td>
        </tr>
        <tr>
          <td colspan="2">相对误差</td>
          <td colspan="2">
            {{ waterForm.bdatas.jhd.xdpc1 }}
          </td>
          <td colspan="2">
            {{ waterForm.bdatas.jhd.xdpc2 }}
          </td>
          <td colspan="2">
            {{ waterForm.bdatas.jhd.xdpc3 }}
          </td>
          <td colspan="2">
            {{ waterForm.bdatas.jhd.xdpc4 }}
          </td>
        </tr>
        <tr>
          <td colspan="2">是否合格</td>
          <td colspan="2">
            {{ waterForm.bdatas.jhd.sfhg1 }}
          </td>
          <td colspan="2">
            {{ waterForm.bdatas.jhd.sfhg2 }}
          </td>
          <td colspan="2">
            {{ waterForm.bdatas.jhd.sfhg3 }}
          </td>
          <td colspan="2">
            {{ waterForm.bdatas.jhd.sfhg4 }}
          </td>
        </tr>
        <tr>
          <td rowspan="8">空白样测定</td>
          <td colspan="3" rowspan="2">校准空白</td>
          <td colspan="2">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              测定值(
              {{ waterForm.unit.kbycd_cdz }}
              )
            </div>
          </td>
          <td v-for="(item, index) in 4" :key="index" colspan="2">
            {{ waterForm.bdatas.kbycd_fx[`jzkb_cdz${index}`] }}
          </td>
        </tr>
        <tr>
          <td colspan="2">是否合格</td>
          <td v-for="(item, index) in 4" :key="index" colspan="2">
            {{ waterForm.bdatas.kbycd_fx[`jzkb_sfhg${index}`] }}
          </td>
        </tr>
        <tr>
          <td colspan="3" rowspan="4">空白1(室)与 空白2(室)</td>
          <td colspan="2">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              测定值(
              {{ waterForm.unit.kbycd_cdz1 }}
              )
            </div>
          </td>
          <td v-for="(item, index) in 8" :key="index">
            {{ waterForm.bdatas.kbycd_fx[`kb_cdz${index}`] }}
            <!-- <el-input
                v-model=""
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
                @blur="handleBlur(index)"
              /> -->
          </td>
        </tr>
        <tr>
          <td colspan="2">是否合格</td>
          <td v-for="(item, index) in 8" :key="index">
            {{ waterForm.bdatas.kbycd_fx[`kb_sfhg${index}`] }}
          </td>
        </tr>
        <tr>
          <td colspan="2">相对偏差(%)</td>
          <td v-for="(item, index) in 4" :key="index" colspan="2">
            {{ waterForm.bdatas.kbycd_fx[`kb_xdpc${index}`] }}
          </td>
        </tr>
        <tr>
          <td colspan="2">相对偏差是否合格</td>
          <td v-for="(item, index) in 4" :key="index" colspan="2">
            {{ waterForm.bdatas.kbycd_fx[`kb_xdpcsfhg${index}`] }}
          </td>
        </tr>
        <tr>
          <td colspan="3" rowspan="2">
            {{ waterForm.bdatas.kbycd_fx.ypbh }}
          </td>
          <td colspan="2">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              测定值(
              {{ waterForm.unit.kbycd_cdz2 }}
              )
            </div>
          </td>
          <td v-for="(item, index) in 4" :key="index" colspan="2">
            {{ waterForm.bdatas.kbycd_fx[`yp_cdz${index}`] }}
          </td>
        </tr>
        <tr>
          <td colspan="2">是否合格</td>
          <td v-for="(item, index) in 4" :key="index" colspan="2">
            {{ waterForm.bdatas.kbycd_fx[`yp_sfhg${index}`] }}
          </td>
        </tr>
        <tr>
          <td rowspan="3">平行样</td>
          <td colspan="3" rowspan="3">
            {{ waterForm.bdatas.pxycd_fx.ypbh }}
          </td>
          <td colspan="2">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              测定值(
              {{ waterForm.unit.pxy_cdz }}
              )
            </div>
          </td>
          <td>
            {{ waterForm.bdatas.pxycd_fx.cdz1 }}
          </td>
          <td>
            {{ waterForm.bdatas.pxycd_fx.cdz2 }}
          </td>
          <td>
            {{ waterForm.bdatas.pxycd_fx.cdz3 }}
          </td>
          <td>
            {{ waterForm.bdatas.pxycd_fx.cdz4 }}
          </td>
          <td>
            {{ waterForm.bdatas.pxycd_fx.cdz5 }}
          </td>
          <td>
            {{ waterForm.bdatas.pxycd_fx.cdz6 }}
          </td>
          <td>
            {{ waterForm.bdatas.pxycd_fx.cdz7 }}
          </td>
          <td>
            {{ waterForm.bdatas.pxycd_fx.cdz8 }}
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              测定值(
              {{ waterForm.unit.pxy_r }}
              )
            </div>
          </td>
          <td colspan="2">
            {{ waterForm.bdatas.pxycd_fx.xdpc1 }}
          </td>
          <td colspan="2">
            {{ waterForm.bdatas.pxycd_fx.xdpc2 }}
          </td>
          <td colspan="2">
            {{ waterForm.bdatas.pxycd_fx.xdpc3 }}
          </td>
          <td colspan="2">
            {{ waterForm.bdatas.pxycd_fx.xdpc4 }}
          </td>
        </tr>
        <tr>
          <td colspan="2">r是否合格</td>
          <td colspan="2">
            {{ waterForm.bdatas.pxycd_fx.sfhg1 }}
          </td>
          <td colspan="2">
            {{ waterForm.bdatas.pxycd_fx.sfhg2 }}
          </td>
          <td colspan="2">
            {{ waterForm.bdatas.pxycd_fx.sfhg3 }}
          </td>
          <td colspan="2">
            {{ waterForm.bdatas.pxycd_fx.sfhg4 }}
          </td>
        </tr>
        <tr>
          <td colspan="4">备注</td>
          <td colspan="16">
            {{ waterForm.bdatas.bnotes }}
          </td>
        </tr>
      </table>
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 20px;
        "
      >
        <div>分析人：</div>
        <div>校核人：</div>
        <div>审核人：</div>
        <div>
          第 {{ tableHeaders.length }} 页 / 共 {{ tableHeaders.length }} 页
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 设置表格的边框、外边距等 */
table {
  border-collapse: collapse;
  width: 100%;
}

table th,
table td {
  border: 1px solid #ddd;
  padding: 2px 10px;
  font-size: 11px;
  text-align: center;
  height: 20px;
}

tr {
  page-break-inside: avoid;
}

.fs12 {
  font-size: 12px;
}

.table {
  width: 100%;
}

/* 打印时隐藏所有默认的头部和尾部 */
@media print {
  /* 隐藏页眉和页脚 */
  @page {
    margin: 0;
  }

  table {
    page-break-inside: avoid;
  }

  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  th,
  td {
    page-break-inside: avoid;
  }

  body {
    margin: 0;
    padding: 0;
    zoom: 100%;
  }

  div {
    page-break-inside: avoid;
  }

  /* 禁用打印页脚和页眉 */
  .no-print {
    display: none;
  }

  /* 如果你不想打印特定元素，可以这样设置 */
  header,
  footer,
  nav,
  .no-print {
    display: none !important;
  }

  /* 保证内容区域不受其他元素影响 */
  .content {
    display: block;
  }
}
</style>
